<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index/home' }"
                >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
                ><a href="/index/vip">会员管理</a></el-breadcrumb-item
            >
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-input
            class="el-input__inner"
            v-model="input"
            placeholder="请输入内容"
        ></el-input>
        <el-button type="primary">搜索</el-button>
        <el-button icon="el-icon-circle-plus-outline" type="primary"
            >添加
        </el-button>
        <el-table :data="membersData" style="width: 100%">
            <el-table-column
                class="table_head"
                label="用户编号"
                prop="_id"
                align="center"
                width="200px"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="用户名"
                prop="nickName"
                align="center"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                align="center"
                prop="avatarUrl"
                label="头像"
            >
                <template slot-scope="scope">
                    <div class="block">
                        <el-avatar
                            shape="square"
                            :size="50"
                            :src="scope.row.avatarUrl"
                        ></el-avatar>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                class="table_head"
                label="住址"
                prop="province"
                align="center"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="VIP截止时间"
                prop="vipdate"
                align="center"
            >
            </el-table-column>
            <el-table-column
                class="table_head"
                label="操作"
                align="center"
                width="260"
            >
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="primary"
                        @click="updateMemberToVip(scope.row._id)"
                        >充值会员</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="cancleMember(scope.row._id)"
                        >取消会员</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="delMember(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination
                :current-page.sync="currentPage2"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="prev, pager, next,sizes"
                :total="membersData.length"
            >
            </el-pagination>
        </div>
        <div v-show="show" class="bigBox">
            <el-card v-show="show" class="box-card">
                <div slot="header" class="clearfix">
                    <el-button
                        style="float: right; padding: 3px 0px"
                        type="text"
                        @click="changeShow"
                        >X</el-button
                    >
                </div>
                <div class="text item">
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="充值时间" >
                            <el-input v-model="form.date" placeholder="时间大于当前时间有效，格式:日/月/年"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button @click="determine" type="primary"
                                >确定</el-button
                            >
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            input: "",
            currentPage2: 3,
            membersData: [],
            form: {},
        };
    },
    methods: {
        changeShow() {
            this.show = !this.show;
            this.form = {};
        },
        async getAllMembers() {
            const result = await this.$api.vip.getAllMembers();
            if (result.meta.status == 200) {
                this.membersData = result.data;
                // console.log(result);
            }
        },
        async updateMemberToVip(_id) {
            this.show = true;
            this.form = {_id};
        },
        async determine() {
            const result = await this.$api.vip.updateMemberToVip(this.form);
            if (result.meta.status == 200) {
                this.$message({
                    message: "充值成功",
                    type: "success",
                });
                this.getAllMembers();
                this.show = false;
                this.form = {};
            } else {
                this.$message({
                    message: "格式不对",
                    type: "error",
                });
            }
        },
        async delMember(_id) {
            const result = await this.$api.vip.delMember({ _id });
            console.log(result);
            if (result.meta.status == 200) {
                this.$message({
                    message: result.meta.msg,
                    type: "success",
                });
                this.getAllMembers();
            } else {
                this.$message({
                    message: result.meta.error,
                    type: "error",
                });
            }
        },
        async cancleMember(_id) {
            const result = await this.$api.vip.cancleMember({ _id });
            // console.log(result,_id);
            if (result.meta.status == 200) {
                this.$message({
                    message: "取消成功",
                    type: "success",
                });
                this.getAllMembers();
            } else {
                this.$message({
                    message: "取消失败",
                    type: "error",
                });
            }
        },
    },
    created() {
        this.getAllMembers();
    },
};
</script>

<style scoped>
.el-input__inner >>> {
    width: 277px;
    padding: 0;
    margin-bottom: 20px;
}
.table_head {
    background-color: rgb(250, 250, 250);
}
.box-card {
    width: 400px;
    display: block;
    height: 200px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}
.bigBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
}
.el-table::before >>> {
    height: 0px !important;
}
.el-select {
    width: 100%;
}
.page {
    display: flex;
    justify-content: flex-end;
}
</style>